// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Modal,Row,Col,Spin,Button,Icon} from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './expandCustomerMapStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import FlagBtn from 'widget/FlagBtn/FlagView'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'
import { QueryCondition } from 'widget/Grid/index'

import { Map,Markers,Polygon,PolyEditor } from 'react-amap';
import Heatmap from 'react-amap-plugin-heatmap';
import heatmapData from './heatmapData'

import Amap from 'widget/Amap/Amap'
var {webAmapKey} = config.mapCfg


/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  const { biz,shareModal,loading,typeOption,item,markerPosition,markers,markers2,center,polygonPath,area1,queryList,markersGroup,mapType,pluginProps}  = modelObj

  //查询
  const onSearch = (payload) => {
    dispatch({
      type: `${namespace}/search`,
      payload: payload
    })
  }
  const events = {
    created: (instance) => { 
    //   var layer = new Loca.DistrictLayer({
    //     map: map,
    //     //fitView: true
    // });
    // console.log(layer)
      // var markers = new AMap.Marker({
      //   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //   position: new AMap.LngLat(116.39, 39.9),
      // });
      // var overlayGroups = new AMap.OverlayGroup({
      //   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //   position: new AMap.LngLat(116.39, 39.9),
      //   title: '北京!!',
      //   icon:haha,
      //   iconSize:(36,36)
      // });
    },
    click: () => { console.log('You clicked map') }

}
const style = {
  10:{//已报备
    color: '#FF8C00',
    fontSize:'30px'
  },
  30:{//已到访
    color: '#EE2C2C',
    fontSize:'30px'
  },
  80:{//已成交
    color: '#5599FF',
    fontSize:'30px'
  },
  60:{//已成交
    color: '#5599FF',
    fontSize:'30px'
  }
}

const renderMarkerLayout = (extData) => {
  return <div><Icon style={style[extData.status]} type="environment" theme="filled" /></div>
}
  
  return (
    <div> 
       <AdvanceSearch
          footer={
            <span>
                <Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={loading}>搜索</Button>
                <Button onClick={() => dispatch({ type: `${namespace}/queryReset` })}>重置</Button>
              </span>
          }
        >
          <QueryCondition
            data={queryList}
            inputChange={(key, value) => dispatch({type: `${namespace}/inputChange`, payload: {key, value}})}
          />
        </AdvanceSearch>
      <div className={styles.iconType}>
        <label>已报备:<Icon style={style[10]} type="environment" theme="filled" /></label>
        <label>已到访:<Icon style={style[30]} type="environment" theme="filled" /></label>
        <label>已成交:<Icon style={style[80]} type="environment" theme="filled" /></label>
      </div>
      <div style={{width: '100%', height: '700px'}} >
        <Amap
        visible = {true}
        latAndLon = {center}
        markers={markersGroup}
        heatmapData = {pluginProps.dataSet.data}
        mapType = {mapType}
        ></Amap>
      {/* {mapType=='1'&&<Map amapkey={webAmapKey} center={center} events={events}>
          {mapType=='1'&&<Markers markers={markersGroup}  render={renderMarkerLayout} useCluster />}
        </Map>}
        {mapType=='2'&&<Map amapkey={webAmapKey} center={center} events={events}>
          {mapType=='2'&& <Heatmap {...pluginProps} />}
        </Map>} */}
        
         {/* <Map amapkey='ca33e49c3efdc67c43170e46487832b5' center={center} events={events}>
          <Markers markers={markersGroup}  render={renderMarkerLayout} useCluster />
          <Heatmap {...pluginProps} />
        </Map> */}
       
      </div>
    </div>
    
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))